<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>AlloyCrop base on AlloyFinger</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/cropper.css"/>
		<style>
			html,body{
				height: 100%;
			}
			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
				background-color: black;
				text-align: center;
			}
		</style>
	</head>

	<body>
	
		

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/transform.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/alloy-finger.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/alloy-crop.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script>
	
			// 获取HTML的DOM
			var htmlDom = document.getElementsByTagName('html')[0];
			var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
			// 设置html的fontsize
			htmlDom.style.fontSize = htmlWidth / 10 + 'px';

			mui.init()
			mui.plusReady(function() {
				FastClick.attach(document.body);
				 plus.navigator.setFullscreen(true);
                var self = plus.webview.currentWebview();
			    var path = self.path;
			    
				mAlloyCrop = new AlloyCrop({
					image_src: path,
					circle: false,
					width: htmlWidth,
					height: htmlWidth,
					output: 1,
					ok_text:'保存',
					cancel_text:'返回',
					ok: function(base64, canvas) {
						var imgUrl = base64.toString()
                        plus.navigator.setFullscreen(false);
                        upload(imgUrl)
					},
					cancel: function() {
						plus.navigator.setFullscreen(false);
						mAlloyCrop.destroy();
						mui.back()
					}
				})
			})
			
		    function upload(HeadImgUrl){  // 上传图片接口
	              var empID =  plus.storage.getItem("empID")
	              mui.post(httpUrl.testUrl+ '/api/Files/IconUpload',{
	              	empID:empID,
	              	IconStr:HeadImgUrl
	              },function(res){
	              	 if(res.code===1001){
	              	 	if(res.data){
	              	 		plus.storage.setItem('filesPath',res.data)
	              	 	}
	              	 	 mui.back()
						 var list = plus.webview.currentWebview().opener();
						 //触发父页面的自定义事件(refresh),从而进行刷新
						 mui.fire(list, 'cropper');
					     //返回true,继续页面关闭逻辑
						 return true;
	              	 }
	              })
               } 
		</script>
	</body>
</html>